function Page(el,options={})
{
    //存放公共属性
    this.el = document.querySelector(el)
    this.options = options
    //启动
    this.init()
}
Page.prototype.init = function()
{
    //创建标签
    this.createTag()
    // 给当前盒子绑定事件
    this.bindEvent()
    // 搞父（样式、后期事件
    this.parentTag()
   
}

 Page.prototype.parentTag = function(){
    // let divObj = document.querySelector('div')
    // console.log(this.el)
    this.el.style.display = 'flex'
    this.el.style.justifyContent = 'center'
    this.el.style.alignItems = 'center'
 }

//  绑定事件
Page.prototype.bindEvent = function()
{
    // 获取当前盒子
    // 绑定点击事件
    this.el.onclick = (e) =>
    {
    // 事件处理函数中
    // 1.获取事件对象
    let evt = e || window.event
    // 2.获取操作的标签  判断
    let target = evt.target || evt.srcElement
    // 3.更新当前页，并且重新创建分页标签和页码
    if(target.nodeName === 'P')
      {
        switch(target.innerText)
        {
                case this.options.pageTag.first:
                    this.options.pageInfo.pageNum = 1
                    break;
                case this.options.pageTag.prev:
                    if(this.options.pageInfo.pageNum === 1) return
                    this.options.pageInfo.pageNum--
                    break;
                case this.options.pageTag.next:
                    if(this.options.pageInfo.pageNum === this.options.pageInfo.totalPage) return
                    this.options.pageInfo.pageNum++  
                    break;
                case this.options.pageTag.last:
                    this.options.pageInfo.pageNum = this.options.pageInfo.totalPage
                default:
                    if(parseInt(target.innerHTML)>0)
                    {
                        this.options.pageInfo.pageNum = parseInt(target.innerHTML)
                    }
                    break;
        }
        // 清空分页数据，重新创建
        this.createTag()
      }
    }
}

Page.prototype.createTag = function()
{
    // 清空之前的盒子
    this.el.innerHTML = ''
    //1.获取分页标签
    let pageTag = this.options.pageTag
    //2.遍历对象，创建p标签，追加到盒子里面
    for(let key in pageTag)
    {
        // let pObj = document.createElement('p')
        // //去除第3个分页标签的框（判断方式）
        // // if(pageTag[key])
        // // if(key !== 'list')
        // // {
        // pObj.innerText = pageTag[key]
        // pObj.style.border = 'solid 1px black'
        // pObj.style.margin ='0 5px'
        // pObj.style.padding = '0 5px'
        // pObj.style.display = 'inline-block'
        // // }
        this.createP('p',pageTag[key],this.el)
        // this.el.appendChild(pObj)
    }
        //创建分页页码
        this.createNum()
} 
// 分页页码   
Page.prototype.createNum = function()
{
    //1.获取第3个分页标签
    let tag3Obj = this.el.querySelector('p:nth-child(3)')
    //去除第3个分页标签的框（清除样式的方式）
    tag3Obj.style.border = 'none'
    tag3Obj.style.margin = '0px'
    tag3Obj.style.padding = '0px'
    // 2.循环创建p标签  追加到1中
    // for(let i=1;i<6;i++)
    // {
    //     // let pObj = document.createElement('p')
    //     // pObj.innerText = i
    //     // pObj.style.border = '1px solid black'
    //     // pObj.style.margin = '0 5px'
    //     // pObj.style.padding = '0 5px'
    //     // pObj.style.display = 'inline-block'
    //     this.createP('p',i,tag3Obj)
    //     // 3.追加到当前盒子中
    //     // tag3Obj.appendChild(pObj)
    // }
    let pageNum = this.options.pageInfo.pageNum
    this.options.pageInfo.totalPage = Math.ceil(this.options.pageInfo.totalData / this.options.pageInfo.pageSize)
    let totalPage = this.options.pageInfo.totalPage
    if(totalPage<7)
    {
        for(let i=1;i<=totalPage;i++)  this.createP('p',i,tag3Obj)
    }
    else if(pageNum<5)
    {
        for(let i=1;i<=5;i++)  this.createP('p',i,tag3Obj)
        // this.createP('p',1,tag3Obj)
        // this.createP('p',2,tag3Obj)
        // this.createP('p',3,tag3Obj)
        // this.createP('p',4,tag3Obj)
        // this.createP('p',5,tag3Obj)
        this.createP('p','...',tag3Obj)
        this.createP('p',totalPage-1,tag3Obj)
        this.createP('p',totalPage,tag3Obj)
    }
    else if(pageNum==5)
    {
        for(let i=1;i<=7;i++)  this.createP('p',i,tag3Obj)
        this.createP('p','...',tag3Obj)
        this.createP('p',totalPage-1,tag3Obj)
        this.createP('p',totalPage,tag3Obj)
    }
    else if(pageNum>5 && pageNum<totalPage-4)
    {
        for(let i=1;i<=2;i++)  this.createP('p',i,tag3Obj)
        this.createP('p','...',tag3Obj)
        this.createP('p',pageNum-2,tag3Obj)
        this.createP('p',pageNum-1,tag3Obj)
        this.createP('p',pageNum,tag3Obj)
        this.createP('p',pageNum+1,tag3Obj)
        this.createP('p',pageNum+2,tag3Obj)
        this.createP('p','...',tag3Obj)
        this.createP('p',totalPage-1,tag3Obj)
        this.createP('p',totalPage,tag3Obj)
    }
    else if(pageNum>=totalPage-4)
    {
        for(let i=1;i<=2;i++)  this.createP('p',i,tag3Obj)
        this.createP('p','...',tag3Obj)
        for(let i=totalPage-4;i<=totalPage;i++)  this.createP('p',i,tag3Obj)
    }
}
// 创建标签
Page.prototype.createP = function(tagName,content,fatherObj){
    // 创建p标签
    let pObj = document.createElement(tagName)
    pObj.innerText = content
    pObj.style.border = '1px solid black'
    pObj.style.margin = '0 5px'
    pObj.style.padding = '0 5px'
    pObj.style.display = 'inline-block'
    // 选中思路  content === 当前页  就选中
    if(content === this.options.pageInfo.pageNum)  pObj.style.background = 'pink'
    // 追加到页面中
    fatherObj.appendChild(pObj)
}
